<template>
  <div class="nei">
    <div class="box1">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">地产管理</el-breadcrumb-item>
        <el-breadcrumb-item>地产改造</el-breadcrumb-item>
      </el-breadcrumb>
      <h2 style="margin-top: 15px">改造记录</h2>
      <!-- <div>
        <input type="text" placeholder="用户名">
        <el-button @click="change">查询</el-button>
      </div> -->
      <div style="margin-top: 25px">
        <el-row>
          <el-col :span="24">
            <div class="grid-content contentTitle">
              <el-button
                class="add"
                type="primary"
                icon="el-icon-plus"
                @click="dialogFormVisible = true"
                >新增改造</el-button
              >
              <el-input
                class="goIn"
                v-model="input"
                placeholder="请输入编码或名称"
              ></el-input>
              <!-- <span class="change">改造时间:</span>
              <el-date-picker
                v-model="addForm.value1"
                type="daterange"
                range-separator="--"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker> -->
              <el-button
                type="primary"
                @click="getList"
                class="contentTitleSearch"
                >查询</el-button
              >

              <div class="dr">
                <!-- <el-button type="primary" plain >批量导入</el-button> -->

                <el-button type="primary" plain>导出excel</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 显示用户数据 -->
      <div class="content">
        <el-table :data="landedMainList" border stripe style="width: 100%">
          <el-table-column
            prop="reNumber"
            label="编码"
            width="180"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="reName"
            label="地产名称"
            width="180"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="reLandArea"
            label="土地面积(㎡)"
            width="180"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="reArchitectureArea"
            label="建筑面积(㎡)"
            width="180"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="reNonbuildingArea"
            label="非建筑面积(㎡)"
            width="180"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="reAddress"
            label="地址"
            width="320"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="reReformStartTime"
            label="改造开始时间"
            width="150"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="reReformEndTime"
            label="改造结束时间"
            width="150"
            header-align="center"
            align="center"
          ></el-table-column>

          <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button
                type="warning"
                circle
                class="el-icon-search"
                @click="lookDialog(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="editDialog(scope.row)"
              ></el-button>
              <!-- <el-button
                type="danger"
                @click="removeHouseById(scope.row.reId)"
                icon="el-icon-delete"
                circle
              ></el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 批量删除以及分页 -->
      <el-row style="margin-top: 18px">
        <el-col :span="24">
          <div class="grid-content bottomDelete">
            <el-footer style="float: right">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="currentPage"
                :page-size="pageSize"
              >
              </el-pagination>
            </el-footer>
          </div>
        </el-col>
      </el-row>

      <!--添加对话框 -->
      <el-dialog title="新增改造" :visible.sync="dialogFormVisible" center>
        <el-form center>
          <el-row>
            <el-col :span="24">
              <div class="grid-content contentTitle">
                <el-input
                  class="goIn2"
                  v-model="input"
                  placeholder="请输入编码或名称"
                ></el-input>
                <el-button type="primary" class="contentTitleSearch"
                  >查询</el-button
                >
              </div>
            </el-col>
          </el-row>
          <el-table
            :data="landList"
            border
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChangeDepartment"
          >
            <el-table-column
              type="selection"
              width="50"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="reNumber"
              label="编码"
              width="148"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="reName"
              label="地产名称"
              width="222"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="reLandArea"
              label="土地面积(㎡)"
              width="160"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="reArchitectureArea"
              label="建筑面积(㎡)"
              width="160"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="reNonbuildingArea"
              label="非建筑面积(㎡)"
              width="160"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="reAddress"
              label="地址"
              width="320"
              header-align="center"
              align="center"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="addTotal"
            @current-change="addHandleCurrentChange"
            @size-change="addHandleSizeChange"
            :current-page="addCurrentPage"
            :page-size="addPageSize"
          >
          </el-pagination>
          <el-row>
            <el-col :span="24">
              <div class="grid-content contentTitle2">
                <span class="change2">改造时间:</span>
                <el-date-picker
                  v-model="addForm.value1"
                  type="daterange"
                  range-separator="--"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
            </el-col>
          </el-row>
          <el-form-item label="改造内容及原因:">
            <el-input
              type="textarea"
              v-model="addForm.text"
              :rows="4"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addReform">提 交</el-button>
        </div>
      </el-dialog>

      <!-- 修改 -->
      <el-dialog
        title="确认删除以下信息？"
        :visible.sync="iconFormVisible"
        width="650px"
        center
      >
        <el-form :model="lookForm" ref="editFormRef" center>
          <el-form-item
            label="编码:"
            class="addContent"
            :label-width="formLabelWidth"
            
          >
            <el-input v-model="editForm.reNumber" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item
            label="地产名称:"
            class="addContent"
            :label-width="formLabelWidth"
          >
            <el-input v-model="editForm.reName" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item
            label="土地面积:"
            class="addContent"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.reLandArea"
              autocomplete="off"
              placeholder="㎡"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="建筑面积:"
            class="addContent"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.reArchitectureArea"
              autocomplete="off"
              placeholder="㎡"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="非建筑面积:"
            class="addContent"
            :label-width="formLabelWidth"
            :disabled="true"
          >
            <el-input
              v-model="editForm.reNonbuildingArea"
              autocomplete="off"
              placeholder="㎡"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="地址:"
            class="addContent"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.reAddress"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="改造时间:"
            class="addContent"
            :label-width="formLabelWidth"
          >
            <el-date-picker
              class="data"
              v-model="editForm.value1"
              type="daterange"
              range-separator="--"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item> -->
          <el-form-item
            label="改造内容及原因:"
            class="addContent"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.reReformCause"
              type="textarea"
              :rows="4"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="iconFormVisible = false">取 消</el-button>
          <el-button @click="editHouse" type="primary">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 查看详情 -->
      <el-dialog
        title="查看详情"
        :visible.sync="dialogVisible"
        width="650px"
        center
      >
        <el-form :model="lookForm" ref="lookFormRef" center>
          <el-form-item
            label="编码:"
            class="addContent"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="lookForm.reNumber"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="地产名称:"
            class="addContent"
            :label-width="formLabelWidth"
          >
            <el-input
              :disabled="true"
              autocomplete="off"
              v-model="lookForm.reName"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="土地面积:"
            class="addHouseArea"
            :label-width="formLabelWidth"
          >
            <el-input
              :disabled="true"
              autocomplete="off"
              placeholder="㎡"
              v-model="lookForm.reLandArea"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="建筑面积:"
            class="addHouseArea"
            :label-width="formLabelWidth"
          >
            <el-input
              :disabled="true"
              autocomplete="off"
              placeholder="㎡"
              v-model="lookForm.reArchitectureArea"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="非建筑面积:"
            class="addHouseArea"
            :label-width="formLabelWidth"
          >
            <el-input
              :disabled="true"
              autocomplete="off"
              placeholder="㎡"
              v-model="lookForm.reNonbuildingArea"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="地址:"
            class="addContent"
            :label-width="formLabelWidth"
          >
            <el-input
              :disabled="true"
              autocomplete="off"
              v-model="lookForm.reAddress"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="改造内容及原因:"
            class="addContent"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="lookForm.reReformCause"
              :disabled="true"
              type="textarea"
              :rows="4"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click="dialogVisible = false" type="primary"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import timechuli from "./../../utils/timechuli";
import axios from "../../utils/axios";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 50,
      addCurrentPage: 1,
      addPageSize: 10,
      addTotal: 50,
      dialogFormVisible: false, //添加对话框显示
      iconFormVisible: false, //编辑对话框显示
      dialogVisible: false, //查看详情对话框显示
      input: "",

      value2: "",
      formLabelWidth: "120px",
      options: [
        {
          value: "0",
          label: "集体所有房产",
        },
        {
          value: "1",
          label: "私有房产",
        },
        {
          value: "2",
          label: "联营企业房产",
        },
      ],
      //数据展示
      landedMainList: [],
      //添加模态框的数据
      landList: [],
      addData: [],
      //查看
      lookForm: {
        reNumber: "",
        reName: "",
        reLandArea: "",
        reArchitectureArea: "",
        reNonbuildingArea: "",
        reAddress: "",
        reReformCause: "",
        value1:''
      },
      //修改数据
      editForm: {
        reNumber: "",
        reName: "",
        reLandArea: "",
        reArchitectureArea: "",
        reNonbuildingArea: "",
        reAddress: "",
        reState: "",
        reReformCause: "",
        value1:''
      },
      //添加数据
      addForm: {
        value1: "",
        text: "",
      },
    };
  },
  //   发起请求
  methods: {
    ...mapActions(["setTest"]),
    getTest() {
      let res = this.getTest(this.id);
      if (res.code == 200) {
        alert("成功");
      }
    },
    //数据展示
    getList() {
      this.$axios
        .post("real/remake/page", {
          limit: this.pageSize,
          page: this.currentPage,
          reName: this.input,
          reReformCause: "ddd"
        })
        .then((r) => {
          console.log(r.data.data);
          this.landedMainList = r.data.data;
          this.total = r.data.count;
        });
    },
    //添加模态框里的数据
    getData() {
      this.$axios
        .post("real/register/page", { limit: 10, page: 1, reName: this.input })
        .then((r) => {
          console.log(r.data.data);
          this.landList = r.data.data;
          this.addTotal = r.data.count;
        });
    },
    //分页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log("当前页码", currentPage);
     this.getList()
    },
    //传输复选框的值
    handleSelectionChangeDepartment(val) {
      this.deleteData = val;
      this.addData = val;
      console.log(val);
    },
    //pageSize改变事件
    handleSizeChange(currentPage) {
      console.log(currentPage);
      this.pageSize = currentPage;
      this.getList();
    },

    //添加分页事件
    addHandleCurrentChange(addCurrentPage) {
      this.addCurrentPage = addCurrentPage;
      console.log("当前页码", addCurrentPage);
      axios({
        url: "real/register/page",
        method: "post",
        data: { page: addCurrentPage, limit: this.addPageSize },
      }).then((r) => {
        console.log(r.data.data);
        this.landList = r.data.data;
      });
    },
    //pageSize改变事件
    addHandleSizeChange(addCurrentPage) {
      console.log(addCurrentPage);
      this.addPageSize = addCurrentPage;
      this.getData();
    },
    //查看模态框事件
    async lookDialog(reId) {
      console.log(reId);
      this.lookForm = reId;

      this.dialogVisible = true;
      console.log(reId);
    },
    //编辑
    editDialog(reId) {
      console.log(reId);
      this.editForm = { ...reId };

      this.iconFormVisible = true;
      console.log(reId);
    },
    //修改房产信息并且提交
    editHouse() {
      this.$refs.editFormRef.validate(async (valid) => {
        console.log(valid);
       
        //发起请求
        const data = await this.$axios
          .post("/real/remake/update", {
            id:this.editForm.reId,
            reNumber: this.editForm.reNumber,
            reName: this.editForm.reName,
            reLandArea: this.editForm.reLandArea,
            reArchitectureArea: this.editForm.reArchitectureArea,
            reNonbuildingArea: this.editForm.reNonbuildingArea,
            reAddress: this.editForm.reAddress,
            reState: this.editForm.reState,
          })
          .then(() => {
            this.iconFormVisible = false;
            //刷新数据
            // this.handleCurrentChange();
            this.getList();
          });
      });

      //关闭对话框

      //提示成功
      this.$message.success("删除地产成功！");
    },
    //删除
    async removeHouseById(reId) {
      console.log(reId);
      //弹框确认
      const confirmResult = await this.$confirm(
        "此操作将永久删除该房产, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      //确认删除返回confirm,取消返回cancel
      console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return this.$message.info("取消删除");
      }
      console.log("确认删除");
      let id = reId;
      console.log(id);
      this.$axios.post("/real/remake/delete", id).then((res) => {
        console.log(res);
      });

      this.$message.success("删除成功！");
      // this.handleCurrentChange();
      this.getList();
    },
    //添加
    async addReform() {
      if (this.addData.length == 0) {
        this.$message.error("您还没有勾选房产");
        return false;
      }
      console.log(this.addForm.text);
      let AddContent = [];
      let j;
      for (let i = 0; i < this.addData.length; i++) {
        j = this.addData[i].reId;
        // AddContent.push(j.id)
      }
      console.log(j);
      let time =''
      let time1=''
      if (this.addForm.value1) {
        time = timechuli.msToDate(this.addForm.value1[0]);
        time1 = timechuli.msToDate(this.addForm.value1[1])
      }
      
      let list = {
        id: j,
        reReformCause: this.addForm.text,
        reReformEndTime: time1,
        reReformStartTime: time
      };
       console.log(AddContent);
      const {data:res}=await this.$axios.post('real/remake/addAndUpdate',list);
      if(res.code !==200){
        console.log(res);
          this.$message.error('添加失败！')
        }
        console.log(res);
        this.$message.success('添加成功！');
        this.addForm.value1="";
        this.addForm.text="";
        this.addData=""

        //添加框隐藏
        this.dialogFormVisible=false;
        //重新获取列表
        // this.handleCurrentChange();
        this.getList();
    },
  },
  mounted() {
    this.getList(), this.getData();
  },
  computed: {},
  created() {
    this.getList(), this.getData();
  },
};
</script>

<style scoped>
.nei {

  width: 100%;
}
.box1 {
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.title span {
  font-size: 16px;
  font-weight: 400;
}
.headimg {
  width: 30px;
  height: 30px;
  border-radius: 15px;
}
.add {
  padding: 12px;
  border-radius: 8px;
  background-color: #363b64;
}
.goIn {
  width: 350px;
  margin-left: 15px;
  height: 32px;
}
.goIn2 {
  width: 350px;

  height: 32px;
}
.goDate {
  width: 200px;
}
.content {
  margin-top: 20px;
  width: 100%;
}
.dr {
  float: right;
  margin-left: 20px;
}
.contentTitle {
  overflow: hidden;
}
.contentTitle2 {
  overflow: hidden;
  margin-top: 15px;
}
.change {
  font-size: 14px;
  font-weight: 400;
  margin-left: 20px;
}
.change2 {
  font-size: 14px;
  font-weight: 400;
}
.contentTitleSearch {
  margin-left: 20px;
}
.addContent {
  width: 420px;
  margin-left: 80px;
}
.addHouseArea {
  width: 350px;
  margin-left: 80px;
}
.bottomDelete {
  overflow: hidden;
}
.reason {
  width: 500px;
}
.data {
  width: 300px;
}
</style>
